import Card from '@/components/Card';
import Description from '@/components/Description';
import { realTimeMonitoringControllerMeterRealtimeData } from '@/services/ess/realTimeMonitoring';
import { Spin } from 'antd';
import type { DescriptionsProps } from 'antd/es/descriptions';
import cls from 'classnames';
import React, { useEffect, useState } from 'react';
import { useIntl } from 'umi';
import { useDeviceInfo, useIsFresh, useSelectedDeviceNode } from '../SelectedDeviceNodeContext';
import Style from './index.less';
export { TransformerBasicInfo } from './BasicInfo';

export const Transformer: React.FC = () => {
  const { isRefesh, setIsRefesh } = useIsFresh();
  const deviceNode = useSelectedDeviceNode();
  const { setDeviceInfo } = useDeviceInfo();
  const [loading, setLoading] = useState<boolean>(true);
  const intl = useIntl();
  const RTOverviewCopy = [
    {
      key: 'ia',
      label: intl.formatMessage({ id: 'data.ia' }),
      children: '',
    },
    {
      key: 'ib',
      label: intl.formatMessage({ id: 'data.ib' }),
      children: '',
    },
    {
      key: 'ic',
      label: intl.formatMessage({ id: 'data.ic' }),
      children: '',
    },
    {
      key: 'ua',
      label: intl.formatMessage({ id: 'data.ua' }),
      children: '',
    },
    {
      key: 'ub',
      label: intl.formatMessage({ id: 'data.ub' }),
      children: '',
    },
    {
      key: 'uc',
      label: intl.formatMessage({ id: 'data.uc' }),
      children: '',
    },
    {
      key: 'ta',
      label: intl.formatMessage({ id: 'data.tempa' }),
      children: '',
    },
    {
      key: 'tb',
      label: intl.formatMessage({ id: 'data.tempb' }),
      children: '',
    },
    {
      key: 'tc',
      label: intl.formatMessage({ id: 'data.tempc' }),
      children: '',
    },
    {
      key: 'apparentPower',
      label: intl.formatMessage({ id: 'data.apparentPowerKva' }),
      children: '',
    },
  ];
  const [RTOverview, setRTOverview] = useState<DescriptionsProps['items']>(RTOverviewCopy);

  const changeFunction = (key: any, result: any) => {
    if (key === 'onlineState') {
      if (result === 1) {
        return intl.formatMessage({ id: 'data.online' });
      } else if (result === 0) {
        return intl.formatMessage({ id: 'data.offline' });
      } else {
        return '--';
      }
    } else {
      return result;
    }
  };

  const changeLoad = (data: API.MeterRealTimeData | undefined) => {
    const getRTOverview = RTOverviewCopy.map((item) => {
      return {
        ...item,
        children:
          data?.[item.key] || data?.[item.key] === 0
            ? changeFunction(item.key, data?.[item.key])
            : null,
      };
    }).filter((res) => res.children);
    setRTOverview(getRTOverview);
  };

  const lebelStyle = {
    width: 180,
  };

  const fetchData = async () => {
    setLoading(true);
    realTimeMonitoringControllerMeterRealtimeData({
      areaId: deviceNode?.areaId?.toString() ?? undefined,
      deviceCode: deviceNode?.deviceCode ?? undefined,
      deviceName: deviceNode?.deviceName ?? undefined,
      deviceType: deviceNode?.deviceType ?? undefined,
    }).then((res) => {
      setDeviceInfo({
        ts: res?.data?.ts ?? undefined,
        onLine:
          res?.data?.onlineState || String(res?.data?.onlineState) === '0'
            ? String(res?.data?.onlineState)
            : undefined,
      });
      setLoading(false);
      changeLoad(res?.data);
    });
  };

  useEffect(() => {
    fetchData();
  }, [deviceNode]);

  useEffect(() => {
    if (isRefesh) {
      console.log('Refreshing change pile data...');
      fetchData();
      setIsRefesh(false);
    }
  }, [isRefesh]);

  return (
    <div>
      <Spin spinning={loading}>
        {/* 基础信息 */}
        <Card title="" className="global-secondary-card">
          <Description
            items={RTOverview}
            column={{ xxl: 3, xl: 3, lg: 3, md: 2, sm: 1 }}
            labelStyle={lebelStyle}
            className={cls(Style.descriptionsImplemente)}
            style={{ marginTop: '30px' }}
          />
        </Card>
      </Spin>
    </div>
  );
};
